<template>
  <div class="step app-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="接入组件配置" />
      <el-step title="输出组件配置" />
    </el-steps>
    <div style="margin: 0 auto; height: calc(100% - 80px); width: 1100px">
      <step1 v-if="active == 0" :id.sync="id" ref="step1Ref" />
      <step2 v-if="active == 1" :id="id" ref="step2Ref" />
    </div>

    <div class="footer">
      <el-button v-show="active == 1" style="margin: 12px 5px" @click="back">上一步</el-button>
      <el-button v-show="active == 0" style="margin: 12px 5px" @click="next">下一步</el-button>
      <template v-if="active == 1">
        <el-button type="primary" style="margin: 12px 5px" @click="submitForm">保 存</el-button>
      </template>
      <el-button style="margin: 12px 5px" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { firstStep, updateFirstStep } from '@/api/milkyway/taskList'
import step1 from './coms/step1'
import step2 from './coms/step2'

export default {
  name: 'EmitDialog',
  components: { step1, step2 },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true
    next()
  },
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    }
  },
  data() {
    return {
      // 路径的参数
      id: this.$route.params.id,
      isOpen: false,
      active: 0,
      ruleForm: {}
    }
  },
  watch: {
    id(newValue, oldValue) {}
  },
  mounted() {
    // this.$refs.step1Ref.getFirestDetail();
  },
  methods: {
    // 回退
    back() {
      this.active--
      // this.$nextTick(() => {
      //   this.$refs.step1Ref.getFirestDetail();
      // });
    },
    // 下一步
    next() {
      this.$refs.step1Ref.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.step1Ref.submitForm().then((res) => {
            if (this.id) {
              updateFirstStep({ id: this.id, ...res }).then((res) => {
                if (this.active++ > 1) this.active = 0
              })
            } else {
              firstStep(res).then((res) => {
                this.id = res
                if (this.active++ > 1) this.active = 0
              })
            }
          })
        }
      })
    },
    // 提交按钮
    submitForm() {
      this.isOpen = false

      this.$refs.step2Ref.submitForm()
    },
    // 取消
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.step {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .footer {
    position: absolute;
    width: 100%;
    margin-left: -20px;
    padding: 0 20px 20px;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    border-top: 1px solid #dfe6ec;
  }
  ::v-deep {
    .el-form-item {
      margin-bottom: 20px;
    }
    .el-step__head.is-process,
    .el-step__head.is-success {
      color: #2979ff !important;
      border-color: #2979ff !important;
      .el-step__line {
        color: #2979ff !important;
      }
    }
    .el-step__title.is-process,
    .el-step__title.is-success {
      color: #2979ff !important;
    }
  }
}
</style>
